<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/6/30
  Time: 23:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>主页面</title>
</head>
<body>
    <jsp:include page="/common/nav.jsp"></jsp:include>

<div class="container">
    <%--条件查询--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">条件查询</div>
                <div class="panel-body">

                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">真实姓名</label>
                            <div class="col-sm-4">
                                <input type="text" id="realName" class="form-control" placeholder="请输入真实姓名">
                            </div>

                            <label class="col-sm-1 control-label">生日</label>
                            <div class="col-sm-4 input-group">
                                <input type="text" id="startDate" class="form-control" placeholder="请输入起始日期">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                                <input type="text" id="endDate" class="form-control" placeholder="请输入结束日期">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-1 control-label">用户名</label>
                            <div class="col-sm-4">
                                <input type="text" id="userName" class="form-control" placeholder="请输入用户名">
                            </div>

                            <label class="col-sm-1 control-label">性别</label>
                            <div class="col-sm-4 input-group">
                                <label class="radio-inline"><input type="radio" name="sex" value="1">男</label>
                                <label class="radio-inline"><input type="radio" name="sex" value="0">女</label>
                            </div>
                        </div>

                        <div class="form-group" id="areaDiv">
                            <label class="col-sm-1 control-label">地区</label>
                        </div>
                        <div class="btn-group col-lg-offset-5" role="group">
                            <button type="button" class="btn btn-success" onclick="search();">查询</button>
                            <button type="reset" class="btn btn-warning" onclick="resetDiv()">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <%--按钮--%>
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <button type="button" class="btn btn-primary" onclick="toAdd();">
                    <span class="glyphicon glyphicon-plus"></span> 增加
                </button>
                <button type="reset" class="btn btn-danger" onclick="delBatch();">
                    <span class="glyphicon glyphicon-trash"></span> 批量删除
                </button>
            </div>
        </div>
    </div>

    <%--列表展示--%>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">用户列表</div>

                <div class="panel-body">
                    <table id="myTable" class="display table table-striped table-bordered"  style="width:100%">
                        <thead>
                        <th>选择</th>
                        <th>登录名</th>
                        <th>真实姓名</th>
                        <th>用户头像</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>地区</th>
                        <th>操作</th>
                        </thead>
                        <tfoot class="text-center">
                        <th>选择</th>
                        <th>登录名</th>
                        <th>真实姓名</th>
                        <th>用户头像</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>地区</th>
                        <th>操作</th>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改密码弹框--%>
<div id="updateAlertDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">原密码:</label>
            <div class="col-sm-8">
                <input type="password" id="oldPwd" class="form-control"  placeholder="请输入原密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">新密码:</label>
            <div class="col-sm-8">
                <input type="password" id="newPwd" class="form-control"  placeholder="请输入新密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">确认密码:</label>
            <div class="col-sm-8">
                <input type="password" id="confirmPwd" class="form-control"  placeholder="再次输入新密码">
            </div>
        </div>
    </form>
</div>

<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    //页面入口函数
    $(function (){
        userTableList();//列表展示
        initDate();//初始化日期
        initAreaSelect(0)//初始化下拉框
    })

    //重置下拉框
    function resetDiv(){
        $($("select[name='areaSelectName']")[0]).parent().nextAll().remove();
    }

    //查询省市区
    function initAreaSelect(id,obj){
        //js中这样是直接判断是否有值
        if (obj){
            //$(js对象),此方法将js对象转换为jquery对象
            //parent:获取元素的上一级
            //nextAll:获取同级元素
            //remove:删除
            $(obj).parent().nextAll().remove()
        }

        $.post({
            type:"post",
            url: "/area/findAreaByFatherId.do",
            data: {"id":id},
            success:function(result){
                if (result.code == 200){
                    var v_area = result.data;
                    if (v_area.length > 0){
                        var html =  '<div class="col-sm-2" >' +//this.value是当前对象的id，this代表自身
                            '<select name="areaSelectName" class="form-control" onchange="initAreaSelect(this.value,this)">' +
                            '<option value="-1">请选择</option>';

                        for (var i = 0; i < v_area.length; i++) {
                            html += '<option value="'+v_area[i].id+'">'+v_area[i].areaName+'</option>'
                        }
                        html += '</select></div>';
                        $("#areaDiv").append(html);
                    }
                }
            }
        })
    }

    //修改密码
    function updatePwd(){
        //备份修改弹框
        var backupsUpdateAlertDiv = $("#updateAlertDiv").html();
        var updatePwdDiv = bootbox.dialog({
            title:"<b>修改密码</b>",
            message:$("#updateAlertDiv form"),//另一种方式.children()
            size:"normal",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-info',
                    callback:function (result){
                        var v_param = {};
                        v_param.oldPassword = $("#oldPwd", updatePwdDiv).val();
                        v_param.newPassword = $("#newPwd", updatePwdDiv).val();
                        v_param.confirmPassword = $("#confirmPwd", updatePwdDiv).val();
                        $.ajax({
                            type:"get",
                            url:"/user/updatePwd.do",
                            data:v_param,
                            success:function (res){
                                if (res.code == 200){
                                    location.href="/user/logout.do"
                                }else (
                                    // 提示
                                    bootbox.alert({
                                        message: "<span class='glyphicon glyphicon-exclamation-sign'></span>"+res.msg,
                                        size: 'small',
                                        title: "提示信息"
                                    })
                                )
                            }
                        })
                    },
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },

        })
        //还原修改弹框
        $("#updateAlertDiv").html(backupsUpdateAlertDiv);
    }

    //条件查询
    function search(){
        var param = {}
        param.realName = $("#realName").val();
        param.startDate = $("#startDate").val();
        param.endDate = $("#endDate").val();
        param.userName = $("#userName").val();
        param.sex = $("input[name='sex']:checked").val();
        param.shengId = $($("select[name='areaSelectName']")[0]).val();
        param.shiId = $($("select[name='areaSelectName']")[1]).val();
        param.xianId = $($("select[name='areaSelectName']")[2]).val();

        $.fn.dataTable.ext.errMode = 'none';
        userTable.settings()[0].ajax.data = param;
        userTable.ajax.reload();
    }

    //列表展示
    var userTable;
    function userTableList(){
        userTable = $("#myTable").DataTable({
            "language": {
                "url": "/js/DataTables/Chinese.json" // 汉化
            },
            // 是否允许检索
            "searching": false,
            "processing": true,
            "lengthMenu": [3,5,15,20],
            //后台分页
            "serverSide": true,
            // 向后台发送请求的url地址[获取分页列表数据的url地址]
            "ajax": {
                "type":"get",
                "url":"/user/list.do",
            },
            // 将后台响应的json格式的数据，进行渲染render
            // json中的key对应
            "columns": [// 返回数据是对象列表的时候需要使用如下方式与字段一一对应
                {"data": "id",
                    render:function (data){
                        return '<input type="checkbox" name="ids" value="'+data+'"/>'
                    }
                },
                {"data": "userName" },
                {"data": "realName" },
                {"data": "headImagePath",
                    render:function (data){
                        return '<img src="'+data+'" width="50px" height="50px"/>'
                    }
                },
                {"data": "sex",
                    render:function (data){
                        return data == 1 ? '<button class="btn btn-danger btn-sm">男</button>':'<button class="btn btn-info btn-sm">女</button>';
                    }
                },
                {"data": "birthday"},
                {"data": "areaName"},
                {"data": "id",
                    render:function (data, type, row, meta){
                        return '<div class="btn-group">'+
                            '<button type="button" class="btn btn-warning btn-sm" onclick="toUpdateUser(\''+data+'\')"><span class="glyphicon glyphicon-pencil"></span> 编辑</button>'+
                            '<button type="button" class="btn btn-danger btn-sm" onclick="deleteUser(\''+data+'\')"><span class="glyphicon glyphicon-trash"></span> 删除</button>'+
                            '<button type="button" class="btn btn-info btn-sm" onclick="exportWord(\''+data+'\')"><span class="glyphicon glyphicon-download"></span> 下载</button>'+
                            '</div>';
                    }
                },
            ]
        });
    }
    //导出word
    function exportWord(userId){
        location.href = "/user/exportWord.do?userId="+userId;
    }

    //跳转修改
    function toUpdateUser(userId){
        location.href = "/user/toUpdate.do?id="+userId;
    }

    //跳转增加
    function toAdd(){
        location.href = "/user/toAdd.do";
    }

    //删除
    function deleteUser(userId){
        bootbox.confirm({
            size:"small",
            titile:"提示框",
            message:"确认删除吗？",
            buttons: {
                confirm: {
                    label: '<span class="glyphicon glyphicon-ok"></span>确定',
                    className: 'btn-success'
                },
                cancel: {
                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                    className: 'btn-danger'
                }
            },
            callback:function (result){
                if (result){
                    $.ajax({
                        type:"post",
                        url:"/user/delete.do?id="+userId,
                        success:function (result){
                            if (result.code == 200){
                                //刷新
                                search();
                                // 提示
                                bootbox.alert({
                                    message: "<span class='glyphicon glyphicon-exclamation-sign'></span>"+result.msg,
                                    size: 'small',
                                    title: "提示信息"
                                });
                            }

                        },error(){
                            // 提示
                            bootbox.alert({
                                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>删除失败",
                                size: 'small',
                                title: "提示信息"
                            });
                        }
                    })
                }
            }
        })
    }

    //批量删除
    function delBatch(){
        var idArr = [];
        $("input[name='ids']:checked").each(function (){
            idArr.push(this.value);
        })
        if (idArr.length>0){
            // 证明用户选择了，所以要提醒是否要删除
            bootbox.confirm({
                titile:"提示信息",
                message:"你确定删除吗?",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                },
                callback:function (result){
                    if (result){
                        $.post({
                            type:"post",
                            url:"/user/deleteBatch.do",
                            data:{"ids":idArr.join(",")},//join方法将js数组转换为指定符号分割的字符串
                            success:function (result){
                                if (result.code == 200){
                                    // 刷新
                                    search();
                                    // 提示
                                    bootbox.alert({
                                        message: "<span class='glyphicon glyphicon-exclamation-sign'></span>删除成功",
                                        size: 'small',
                                        title: "提示信息"
                                    });
                                }
                            },error(){
                                // 提示
                                bootbox.alert({
                                    message: "<span class='glyphicon glyphicon-exclamation-sign'></span>删除失败",
                                    size: 'small',
                                    title: "提示信息"
                                });
                            }
                        })
                    }
                }
            })
        }else {
            // 没有选择，提醒至少选中一项
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>请选择要删除的记录",
                size: 'small',
                title: "提示信息"
            });
        }

    }

    // 初始化日期组件
    function initDate() {
        $('#startDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
        $('#endDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
    }
</script>
</body>
</html>
